<html>

<head>
    <title>canvas响应鼠标事件</title>

    <style>
        body {
            background: #dddddd;
        }

        #canvas {
            position: absolute;
            left: 0px;
            top: 20px;
            margin: 20px;
            background: #ffffff;
            border: thin inset rgba(100, 150, 230, 0.5);
            cursor: pointer;
        }

        #readout {
            margin-top: 10px;
            margin-left: 15px;
            color: blue;
        }
    </style>
</head>

<body>
    <div id='readout'></div>

    <canvas id='canvas' width='500' height='250'>
        Canvas not supported
    </canvas>

    <script>
        var canvas = document.querySelector('#canvas'),
            readout = document.querySelector('#readout'),
            context = canvas.getContext('2d');
        
        
        //将相对于窗口的鼠标坐标转换为canvas坐标
        function windowToCanvas(canvas, x, y) {
            /**
                在canvas对象上调用getBoundingClientRect()方法，
                来获取canvas元素的边界框，
                该边界框的坐标是相对于整个窗口的。
                然后返回一个对象，该对象的x、y属性分别对应于鼠标在canvas之中的坐标
            **/
            var bbox = canvas.getBoundingClientRect();
            console.log('bbox:::', JSON.stringify(bbox));
            
            return {
                x: x - bbox.left * (canvas.width / bbox.width),
                y: y - bbox.top * (canvas.height / bbox.height)
            };
        }


        function drawBackground() {
            var VERTICAL_LINE_SPACING = 12;
            let i = context.canvas.height;
            //清空画布
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.strokeStyle = 'lightgray';
            context.lineWidth = 0.5;

            //从左上角开始画横线 横线见的间隔由VERTICAL_LINE_SPACING指定
            while (i > VERTICAL_LINE_SPACING * 4) {

                context.beginPath();
                context.moveTo(0, i);//横线的起始坐标
                context.lineTo(context.canvas.width, i);//结束坐标
                context.stroke();
                i -= VERTICAL_LINE_SPACING;
            }
        }

        function drawGuidelines(x, y) {
            context.strokeStyle = 'rgba(0,0,230,0.8)';
            context.linewidth = 0.5;

            function drawHorizontalLine(y) {
                context.beginPath();
                context.moveTo(0, y + 0.5);
                context.lineTo(context.canvas.width, y + 0.5);
                context.stroke();
            }

            function drawVerticalLine(x) {
                context.beginPath();
                context.moveTo(x + 0.5, 0);
                context.lineTo(x + 0.5, context.canvas.height);
                context.stroke();
            }

            drawVerticalLine(x);
            drawHorizontalLine(y);
        }
        
        function updateReadout(x, y) {
            readout.innerHTML = '(' + x.toFixed(0) + ',' + y.toFixed(0) + ')';
        }

        /*
        //监听图像加载事件
        spritesheet.οnlοad = function (e) {
            console.log('img-loaded');
            // drawSpritesheet();
        }
        */
        var spritesheet = new Image(50, 50);

        spritesheet.src = 'http://ws-www.hantinghotels.com/hworld/NewWeb/img/activity3.jpg';
        function drawSpritesheet() {
            console.log('img::::draw');
            //从画布的左上角开始绘制图像
            context.drawImage(spritesheet, 0, 0);
        }
       //监听鼠标移动事件
       canvas.addEventListener('click', function(e) {
            console.log(11111);
            var loc = windowToCanvas(canvas, e.clientX, e.clientY);
            console.log('x=' + e.clientX + ' y=' + e.clientY);
            //绘制背景
            drawBackground();
            //绘制图像
            drawSpritesheet();
            //绘制横线和竖线 -- 十字交叉线
            drawGuidelines(loc.x, loc.y);
            //更新坐标label
            updateReadout(loc.x, loc.y);
       })
    </script>
</body>

</html>